<!-- Copyright 2021 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<link rel="import" href="../common_styles/common_styles.html">
<link rel="import" href="../oobe_vars/oobe_custom_vars_css.html">
<link rel="import" href="../behaviors/oobe_i18n_behavior.html">


<!--
  Material design square button for text-labelled buttons.
  By default, text is blue, background is white.
  |inverse| makes text white on a blue background.
  Note, that slotted element must have separate DOM node (i.e. a separate div).

  Example:
    <oobe-icon-button inverse text-key="oobeOKButtonText">
    </oobe-icon-button>

  Button text can be also changed by specifying element for "text" slot, but
  will have to define label-for-aria in such case.

  Attributes:
    'disabled' - button is disabled when the attribute is set.
    (See crbug.com/900640)
    'inverse' - makes text white and background blue.
    'text-key' - ID of localized string to be used as button text.
    'border' - adds border to the button.
    'label-for-aria' - accessibility label, override usual behavior
                       (string specified by text-key is used as aria-label).
                       Elements that use slot="text" must provide label-for-aria
                       value.
-->
<dom-module id="oobe-text-button">
  <template>
    <style include="cr-shared-style oobe-common-styles">
      cr-button {
        --border-color: var(--google-grey-300);
        --cr-button-height: var(--oobe-button-height);
        border-radius: var(--oobe-button-radius);
        margin: 0 4px;
      }
      :host ::slotted(*),
      .fallback {
        font-family: var(--oobe-button-font-family);
        font-size: var(--oobe-button-font-size);
      }
      :host([disabled]) {
        pointer-events: none;
      }
    </style>
    <cr-button id="button" on-click="onClick_" disabled="[[disabled]]"
        inverse$="[[inverse]]" aria-label$="[[labelForAriaText_]]"
        border$="[[border]]">
      <div id="container"
          class="flex layout horizontal center center-justified self-stretch">
        <slot name="text">
          <div class="fallback">[[i18nDynamic(locale, textKey)]]</div>
        </slot>
      </div>
    </cr-button>
  </template>
  <script src="oobe_text_button.js"></script>
</dom-module>
